<template>
  <div class="app-container ">
    <div v-show="isShow" class="nav">
      <div class="nav-item">
        <span class="item-label">分类：</span>
        <div class="list">
          <ul>
            <li v-for="(item,index) in type" :key="index">
              <router-link :to="item.path">{{item.name}}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="nav-item sub-item" v-show="$route.path !='/videomusic/all' ">
        <span class="item-label">类别：</span>
        <div class="list">
          <ul>
            <li :class="$route.query.value == item.columnId?'active':''" v-for="(item,index) in list" :key="index" @click="loadList(item)">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetNewVideoList,GetVideoList } from "@/api/Api";
export default {
  data() {
    return {
      type: [
        {
          name: "全部",
          id: 1,
          path: "/videomusic/all"
        },
        {
          name: "视频",
          id: 2,
          path: "/videomusic/video"
        },
        // {
        //   name: "音频",
        //   id: 3,
        //   path: "/videomusic/music"
        // }
      ],
      list: [],
      VideomusicColumnId:sessionStorage.getItem('VideomusicColumnId')
    };
  },
  created() {
    this.init();
  },
  components: {},
  methods: {
    init() {
      GetVideoList(3,this.VideomusicColumnId).then(result => {
        this.list = result.data.map((value, index) => {
          return {
            name: value.columnName,
            columnId:value.columnId,
            path: "/videomusic/video?value=" + value.columnId
          };
        });
        console.log(this.list)
      });
      //  this.loadList(this.list[0])
    },
    loadList(item) {
      this.$router.push(item.path);
    }
  },
  computed: {
    navtype() {
      return this.$store.state.videoOrMusic;
    },
    isShow() {
      const path = this.$route.path;
      switch (path) {
        case "/videomusic/music_content":
          return false;
          break;
        case "/videomusic/video_nocontent":
          return false;
          break;
        case "/videomusic/video_content":
          return false;
          break;
          case "/record_videocontent":
          return false;
          break;
        default:
          return true;
          break;
      }
    }
  },
  watch:{
    '$route'(){
      const path = this.$route.path;
      switch (path) {
        case "/videomusic/video":
          !this.$route.query.value?this.$router.push(this.$route.path+'?value='+this.list[0].columnId):''
          break;
        case "/videomusic/video_content":
          !this.$route.query.value?this.$router.push(this.$route.path+'?value='+this.list[0].name):''
          break;
        default:
          return true;
          break;
      }
    }
}
}
</script>
<style lang="less" scoped>
.custom-dz{
  .nav .is-active{
    background: #e93926;
  }
  .nav .sub-item li.active{
    background: #e93926;

  }
}
.route-link {
  padding: 30px 0;
  overflow: hidden;
}
.nav {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  font-size: 16px;

  .nav-item {
    display: flex;
    margin: 10px 0;
    align-items: center;
    .list {
      overflow: hidden;
      margin-left: 10px;
      ul {
        padding: 0px;
        float: left;
        li {
          float: left;
          cursor: pointer;
          a {
            text-decoration: none;
            color: #000;
            padding: 5px 15px;
            display: inline-block;
          }
        }
      }
    }
  }
  .sub-item {
    li {
      padding: 5px 15px;
    }
    li.active {
      background: #15c798;
      color: #fff;
      border-radius: 20px;
    }
  }
  .nav-item:first-child {
    padding-top: 0px;
  }
  .nav-item:last-child {
    padding-bottom: 0px;
  }
  .is-active {
    background: #15c798;
    color: #fff !important;
    border-radius: 20px;
  }
}
</style>


